<template>
	<view class="">
		<van-nav-bar class="titleBox" title="预约记录" fixed="true" />
		</van-nav-bar>
		<view class="topNav">

		</view>
		<view class="record" v-for="(item,index) in orderdata" :key='index'>
			<view class="">姓&nbsp &nbsp &nbsp &nbsp名：{{item.name}}</view>
			<view class="">开始时间：{{item.beginDate}}</view>
			<view class="">结束时间：{{item.endDate}}</view>
			<view class="">类&nbsp &nbsp &nbsp &nbsp型：{{item.appointType==1?'个人':'团队'}}</view>
			<view class="">状&nbsp &nbsp &nbsp &nbsp态：{{item.statusInfo}}</view>
			<button class="qrCode" type="submit" @tap=toQRcode(item.barCode)>查看二维码</button>
			<button class="cancel" type="submit" @tap="subReasonData(index)" v-show="cancelShow" id="cc">取消预约</button>
		</view>
		<!-- 取消原因弹出层 -->
		<van-popup closeable :show="textShow" round @close="onClose" custom-style="padding-top:10px;font-size:18px; width:70%;height:200px; text-align: center;margin:50px,0">取消预约原因
			<input class="inputReason" type="text" :value="reasonData" @input="dataChange" />
			<button @tap="subrequest()" class="subBtn" type="default">提交</button>
		</van-popup>
		<!--取消预约弹出层  -->
		<van-dialog id="van-dialog" />
		<!--登录状态框  -->
		<view class="loginBox" v-if="showLogin">
			<text class="login">您当前尚未登录</text>
			<text class="login size">未登录,将无法享受预约服务哦~</text>
			<button class="loginBtn" type="default" @tap="loginLink">立即登录</button>
		</view>
	</view>
</template>

<script>
	import Dialog from '../../wxcomponents/vant/dist/dialog/dialog.js'
	import request from '../../request/request.js'
	export default {
		onShow() { //小程序启动，或者后台数据更新-返回到前台时触发---后退到此页面时触发
			this.$store.commit('checksession')
			var isLogin = this.$store.state.isLogin
			console.log("isLogin是", isLogin);
			if (isLogin) {
				uni.showToast({
					title: '您还未登录',
					icon: 'loading'
				})
				// this.showLogin=true;
			} else {
				this.query();
				this.showLogin=false;
			}
		},
		data() {
			return {
				orderdata: [],
				cancelShow: true,
				burCode: '',
				status: 1,
				textShow: false,
				reasonText: '',
				reasonData: '',
				everyId: '',
				showLogin: this.$store.state.isLogin
			}
		},
		methods: {
			dataChange(e) {
				this.reasonData = e.detail.value; //双向数据绑定-赋值给reasonData
			},
			onClose() {
				this.textShow = false;
			},
			toQRcode(bar) {
				uni.navigateTo({
					url: './qrCode/qrCode?barcode=' + bar, //这里传入一个键值对如：barcode='65421'
				})
			},
			cancelDialog(index) {
				this.$refs.cancel.$el.style.color = "pink"
			},
			//页面加载，发送请求（获取所有查询预约数据），获取数据。
			query() {
				request({
					url: '/api/Dev_Appointment/GetPageDataAppoiment',
					method: 'POST',
					data: {
						"Page": 1,
						"Rows": 30,
						"Total": 100,
						"Sort": "User_Id",
						"Export": false,
						"Value": null,
					},
					success: (res) => {
						this.orderdata = res.data.rows;
					},
					fail: (fa) => {
						console.log("报错:", fa)
					}
				})
			},

			subReasonData(index) {
				this.textShow = true;
				// // 获取id和reason
				var id = this.orderdata[index].id;
				this.everyId = id; //将索引对应的id赋值给data中的属性
				this.orderdata[index].statusInfo = '取消预约成功';
				this.reasonData = '';

			},
			subrequest() {
				if (this.reasonData == '') {
					uni.showToast({
						title: '内容不能为空',
						icon: 'loading'
					})
				} else {
					var reason = this.reasonData; //从data属性中获取--取消原因
					var id = this.everyId; //从data属性中获取对应的id
					request({
						url: '/api/Dev_Appointment/CancelWeChat',
						method: 'POST',
						data: {
							"Id": id,
							"CancelReason": reason,
						},
						success: (sccss) => {
							console.log('取消预约请求成功', sccss);
						},
						fail: (fl) => {
							console.log('预约失败:', fl);
						},

					})
					this.status = '取消预约成功'
					this.textShow = false;
				}

			},
			loginLink() {
				uni.navigateTo({
					url:'../home/home'
				})
			}
		}

	}
</script>

<style>
	
	.loginBox {
		box-sizing: border-box;
		width: 100%;
		height: 100upx;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		bottom: 0;
		padding: 3px 26px;
	}
	
	.loginBox .loginBtn {
		width: 200upx;
		height: 60upx;
		position: absolute;
		right: 7%;
		top: 50%;
		transform: translate(0, -50%);
		line-height: 60upx;
		background-color: #007AFF;
		color: #ffffff;
		border-radius: 60upx;
	}
	
	.login {
		display: block;
		color: #FFFFFF;
		margin: 0;
		padding: 0;
	}
	
	.size {
		font-size: 12px;
		color: #dadada;
	}
	
	.topNav {
		width: 100%;
		height: 180upx;

	}

	.record {

		margin: 0 auto;
		width: 94%;
		height: 247upx;
		border: 1px solid #44cef6;
		border-radius: 10upx;
		background-color: #f6f6f6;
		margin-top: 10upx;
		position: relative;
	}

	.record view {
		margin-left: 20upx;
		padding: 0;
	}

	.qrCode,
	.cancel {
		width: 200upx;
		height: 70upx;
		font-size: 14px;
		text-align: center;
		line-height: 70upx;
		border: none;
		outline: none;
		color: #FFFFFF;
		border-radius: 20px;
	}

	.qrCode {
		position: absolute;
		right: 20upx;
		top: 25%;
		background-color: #3578e5;
	}

	.cancel {
		position: absolute;
		right: 20upx;
		top: 65%;
		background-color: #e55d33;
		border: none;
	}

	.inputReason {
		border: 1px solid #007AFF;
		width: 80%;
		height: 70upx;
		margin: 0 auto;
		margin-top: 50upx;
	}

	.subBtn {
		width: 180upx;
		height: 76upx;
		margin-top: 54upx;
		text-align: center;
		line-height: 70upx;
	}
</style>
